<template>
    <div>
        <div class="flexSB   select szie14" style="width: 350px">
            <div :class="{ titleBox: select == item.type }" :key="index" @click="selectFun(item)" class="hand title"
                v-for="(item, index) in goodsType">
                {{ item.title }}
            </div>
        </div>
        <keep-alive>
            <short v-show="query.creation_type == 'short'"  :user_id="user_id" v-if="user_id" ref="short"></short>
       </keep-alive>

       <keep-alive>
            <infomation  v-show="query.creation_type == 'infomation'"  :user_id="user_id" v-if="user_id"></infomation>
       </keep-alive>

       <keep-alive>
            <long v-show="query.creation_type == 'long'"  :user_id="user_id" v-if="user_id" ref="long" ></long>
       </keep-alive>

       
    </div>
</template>

<script>
import short from './short'
import infomation from './infomation'
import long from './long'

export default {
    components:{
        short,
        infomation,
        long,
    },
    props: {
        user_id: {
            type: [Number, String]
        }
    },
    data() {
        return {
            keyword: '',
            query: {
                page: 1,
                size: 30,
                user_id: '',
                creation_type: 'short',
            },
            data: [],
            goodsType: [
                {
                    title: '短视频',
                    type: 'short',
                },
                {
                    title: '帖子',
                    type: 'infomation',
                },
                {
                    title: '长视频',
                    type: 'long',
                },
            ],
            select: 'short',
           
          
        }
    },
    watch: {
        select() {
            console.log('发送变化')
        },
    },
    mounted() {
        if (this.user_id) {
            this.query.user_id = this.user_id
            this.getCreationList()
        }

    },
    methods: {
        manageFun() {
            switch (this.select) {
                case 'short':
                    console.log('短视频')
                    this.$refs.short.type = 'edit'
                    break;
                case 'long':
                    console.log('长视频')
                    this.$refs.long.type = 'edit'
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },
        deleteFun() {
            switch (this.select) {
                case 'short':
                    console.log('短视频')
                    this.$refs.short.deleteBrowse()
                    break;
                case 'long':
                    console.log('长视频')
                    this.$refs.long.deleteBrowse()
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },

        outManageFun() {
            switch (this.select) {
                case 'short':
                    console.log('短视频')
                    this.$refs.short.type = 'views'
                    break;
                case 'long':
                    console.log('长视频')
                    this.$refs.long.type = 'views'
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },
        allSelectFun(allSelect) {
            switch (this.select) {
                case 'short':
                    console.log('短视频')
                    if (allSelect) {
                        this.$refs.short.allSelect()
                    } else {
                        this.$refs.short.cancelAllSelect()
                    }
                    break;
                case 'long':
                    console.log('长视频')
                    if (allSelect) {
                        this.$refs.long.allSelect()
                    } else {
                        this.$refs.long.cancelAllSelect()
                    }
                    break;
                default:
                // 当expression的值不匹配任何case时执行的代码
            }
        },



        selectFun(item) {
            this.select = item.type
            this.query.creation_type = item.type
        },
       

    },
}
</script>

<style lang="scss" scoped>
.titleBox {
    border-radius: 100px;
    background-color: #272337;
}


.title {
    width: 80px;
    padding: 5px;
    text-align: center;
}

.select {
    color: #FFF;
    border: 1px solid #24203B;
    border-radius: 100px;
    padding: 5px;
    box-sizing: border-box;
    background-color: #151225;
}

.selectType {
    border-radius: 50px;

    // box-sizing: border-box;
}


/deep/.el-tabs__nav.is-stretch {
    min-width: auto !important;
    width: 80%;
    margin-left: 10%;
}

/deep/.el-tabs__item {
    font-size: 17px !important;
    color: #666 !important;
}

/deep/.el-tabs__item.is-active {
    color: #333 !important;
}

/deep/.el-tabs__active-bar {
    background-color: #ff1c6d !important;
}

/deep/.el-tabs__nav-wrap::after {
    background: #eee !important;
    height: 1px !important;
}
</style>